<template>
	<view class="container">
		<map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude" :markers="markers"
			@markertap="clickMarker" @regionchange="onRegionChange" @end="onRegionChange" @begin="onRegionChange"
			scale="16">
			<div class="search-select">
				<lin-select :list="senceList" :loading="loading" loading-text="数据加载中" value-key="value" name-key="name"
					max-height="180" placeholder="请输入景点名称" @input="selectChange" @confirm="selectSence"
					v-model="chooseValue" />
			</div>
			<div class="selection-panel" v-show="displayPanel">
				<div class="hidden" @click="hiddenPanel">×</div>
				<div class="sence-info">
					<div class="sence-info-image">
						<uni-swiper-dot :info="selectionSence.imageList" :current="current" mode="dot">
							<swiper class="swiper-box">
								<swiper-item v-for="(item ,index) in selectionSence.imageList" :key="index">
									<view class="swiper-item">
										<image :src="item.url" class="swiper-image"></image>
									</view>
								</swiper-item>
							</swiper>
						</uni-swiper-dot>
					</div>
					<div class="basic-information">
						<div class="basic-left">
							<div class="sence-name">{{selectionSence.name}}</div>
							<div style="color: chocolate;">{{selectionSence.level}}</div>
						</div>
						<div class="basic-right">
							<div class="rate-num">整体评分：{{selectionSence.rating}}</div>
							<div>
								<uni-rate v-model="selectionSence.rating" />
							</div>
						</div>
					</div>
					<uni-section class="mb-10" title="开放时间" type="line" padding>
						{{selectionSence.openTime}}
					</uni-section>
					<uni-section class="mb-10" title="景点介绍" type="line" padding>
						<div class="introduce">{{selectionSence.scenicDescription}}</div>
					</uni-section>


				</div>
			</div>
		</map>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onReady,
		onShareAppMessage,
		onLoad
	} from '@dcloudio/uni-app';
	import uniRequest from '@/components/request.js';
	let chooseValue = ref("北京")
	let displayPanel = ref(false)
	let latitude = ref(23.099994)
	let longitude = ref(113.324520)
	let img = "/static/地图.png"
	let _mapContext = null;
	let markers = ref([])
	let currentSelectMarkerId = ref(0)
	let currentSelectMarker = ref(0)
	let currentCityId = ref("")
	let current = ref(0)
	const senceList = ref([])
	let selectionSence = ref({})
	let loading = ref(true)



	const createSelectMarker = (marker, iconPath, callout) => {
		marker.iconPath = iconPath
		if (callout) {
			marker.callout = {
				content: "我在这里",
				display: 'ALWAYS'
			}
		} else {
			marker.callout = null
		}
		return marker;
	}

	const selectChange = (e) => {
		senceList.value = []
		if (chooseValue.value == null || chooseValue.value == "") {
			markers.value = []
			return
		}
		if (chooseValue.value == currentSelectMarkerId.value) {
			return
		}
		uniRequest({
			url: 'https://suixinyou.top:5066/2c/scenic/gd/getScenicList',
			method: 'POST',
			data: {
				"current": 1,
				"adCode": currentCityId.value,
				"size": 1000,
				"name": e
			},
			success(res) {
				res.data.data.records.map(p => {
					const sence = p
					sence.value = p.id
					senceList.value.push(sence)
				})
			},
			fail(err) {
				console.log('请求失败', err);
			},
			complete() {
				console.log('请求完成');
			}
		})
		loading.value = false

	}

	const selectSence = (e) => {
		if (e == null) {
			return
		}
		markers.value = []
		uniRequest({
			url: 'https://suixinyou.top:5066/2c/scenic/gd/getScenicInfo?id=' + e,
			method: 'GET',
			data: {},
			success(res) {
				const p = res.data.data
				// 飞行
				_mapContext.moveToLocation({
					latitude: p.locationLat,
					longitude: p.locationLon,
					success(res) {
						console.log(res)
					},
					fail(res) {
						console.log(res)
					},
					complete(res) {
						console.log('飞行结束', res)
					}
				})
				const sence = {
					id: p.id,
					iconPath: img,
					width: 30,
					height: 30,
					joinCluster: false, // 指定了该参数才会参与聚合
					latitude: p.locationLat,
					longitude: p.locationLon,
					label: {
						width: 100,
						height: 30,
						borderWidth: 1,
						borderRadius: 10,
						bgColor: '#ffffff',
						content: p.name
					}
				}
				markers.value.push(sence);

				displayPanel.value = true
				selectionSence.value.name = p.name
				selectionSence.value.rating = p.rating
				selectionSence.value.notice = p.detail.admissionNotice
				selectionSence.value.specialPeople = p.detail.ticketPolicy
				selectionSence.value.specialInfo = p.detail.reminder
				selectionSence.value.bookNotice = p.detail.projectIntro
				selectionSence.value.scenicAddress = p.address
				selectionSence.value.openTime = p.detail.openTime
				selectionSence.value.lng = p.locationLon
				selectionSence.value.lat = p.locationLat
				selectionSence.value.scenicDescription = p.detail.header + p.detail.intro
				selectionSence.value.imageList = p.photos
			},
			fail(err) {
				console.log('请求失败', err);
			},
			complete() {
				console.log('请求完成');
			}
		})

	}

	const clickMarker = (e) => {
		if (!displayPanel.value) {
			displayPanel.value = true
		}

		uniRequest({
			url: 'https://suixinyou.top:5066/2c/scenic/gd/getScenicInfo?id=' + e.detail.markerId,
			method: 'GET',
			data: {},
			success(res) {
				const data = res.data.data
				selectionSence.value.name = data.name
				selectionSence.value.rating = data.rating
				selectionSence.value.level = data.level == null ? "非A级景点" : "AAAAA".slice(0, r.level)
				selectionSence.value.notice = data.detail.admissionNotice
				selectionSence.value.specialPeople = data.detail.ticketPolicy
				selectionSence.value.specialInfo = data.detail.reminder
				selectionSence.value.bookNotice = data.detail.projectIntro
				selectionSence.value.scenicAddress = data.address
				selectionSence.value.openTime = data.detail.openTime
				selectionSence.value.lng = data.entrLocationLon
				selectionSence.value.lat = data.entrLocationLat
				selectionSence.value.scenicDescription = data.detail.header + data.detail.intro
				selectionSence.value.imageList = data.photos
			},
			fail(err) {
				console.log('请求失败', err);
			},
			complete() {
				console.log('请求完成');
			}
		})
	}


	const hiddenPanel = () => {
		displayPanel.value = false;
	}



	onShareAppMessage((res) => {
		console.log(res)
		return {
			title: '简单旅游助手',
			path: "/pages/sencemap/SenceMapVue?cityId=" + currentCityId
		}
	})
	onLoad((options) => {
		currentCityId.value = options.cityId

	})



	/**
	 * 根据屏幕的移动获取景点
	 */
	const getScenicList = (southwest, northeast, name) => {
		if (senceList.value.length > 0) {
			return
		}
		markers.value = []
		uniRequest({
			url: 'https://suixinyou.top:5066/2c/scenic/gd/getScenicList',
			method: 'POST',
			data: {
				"current": 1,
				"adCode": currentCityId.value,
				"size": 10000,
				"startRange": [northeast.longitude, northeast.latitude],
				"endRange": [southwest.longitude, southwest.latitude],
			},
			success(res) {
				res.data.data.records.map(p => {
					const sence = {
						id: p.id,
						iconPath: img,
						width: 30,
						height: 30,
						joinCluster: false, // 指定了该参数才会参与聚合
						latitude: p.locationLat,
						longitude: p.locationLon,
						label: {
							width: 100,
							height: 30,
							borderWidth: 1,
							borderRadius: 10,
							bgColor: '#ffffff',
							content: p.name
						}
					}
					markers.value.push(sence);
				})
			},
			fail(err) {
				console.log('请求失败', err);
			},
			complete() {
				console.log('请求完成');
			}
		})

	}

	const onRegionChange = (event) => {
		if (event.type != "end") {
			return
		}

		_mapContext.getScale({
			success(res) {
				if (res.scale < 15) {
					uni.showToast({
						title: '地图缩放太大不显示景点坐标',
						icon: 'none'
					})
					markers.value = []
				} else {
					getScenicList(event.detail.region.southwest, event.detail.region.northeast)
				}
			}
		})

	}

	/**
	 * 获取城市中心坐标
	 */
	const getCityCenter = () => {
		uniRequest({
			url: 'https://suixinyou.top:5066/2c/scenic/gd/getCity/' + currentCityId.value + '/2',
			method: 'GET',
			success(res) {
				latitude.value = res.data.data.locationLat
				longitude.value = res.data.data.locationLon
			},
			fail(err) {
				console.log('请求失败', err);
			},
			complete() {
				console.log('请求完成');
			}
		})
	}

	onReady(() => {
		_mapContext = uni.createMapContext("map", this);
		// 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
		_mapContext.initMarkerCluster({
			enableDefaultStyle: false,
			zoomOnClick: true,
			gridSize: 60,
			complete(res) {
				console.log('initMarkerCluster', res)
			}
		});

		_mapContext.on("markerClusterCreate", (e) => {
			console.log("markerClusterCreate", e);
		});

		getCityCenter()
		_mapContext.getRegion({
			success(res) {
				const southwest = res.southwest;
				const northeast = res.northeast;
				getScenicList(southwest, northeast)
			},
			complete(res) {
				console.log('initMarkerCluster', res)
			}
		});

	})
</script>

<style>
	.container {
		width: 100%;
		height: 100%;
	}

	.map {
		width: 100%;
		height: 100%;
	}

	.selection-panel {
		position: absolute;
		height: 50%;
		width: 100%;
		background-color: white;
		border-radius: 40rpx;
		bottom: 0;
		overflow: auto;
	}


	.hidden {
		position: absolute;
		right: 20rpx;
		top: 10rpx;
		font-size: 40rpx;
	}

	.sence-info {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-left: 40rpx;
		margin-right: 40rpx;
		margin-top: 60rpx;
		margin-bottom: 100rpx;
		overflow: auto;
	}

	.selection-input {
		position: absolute;
		left: 30%;
		top: 2%;
	}

	.uni-stat__select {
		background-color: aliceblue;

	}

	.search-select {
		margin-top: 40rpx;
		margin-left: 10%;
		width: 80%;
	}

	.sence-info-image {
		width: 100%;
	}

	.swiper-image {
		height: 300rpx;
		width: 100%;
	}

	.basic-information {
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
		justify-content: center;
		width: 100%;
	}

	.rate-num {
		margin-left: 10rpx;
	}

	.mb-10 {
		width: 100%;
	}

	.basic-left {
		width: 50%;
	}

	.basic-right {
		width: 50%;
	}
</style>